<template>
    <div class="body">
        <div class="login">
            <div class="login-box">
              <div @click="closeReg" class="close-window">
                  <Icon type="close-round"></Icon>
              </div>
              <div class="title">
                <h2 class="clearfix">
                    <span>会员注册</span>
                </h2>
              </div>
              <Form ref="login-form" :model="form"  :rules="rules">
                <Form-item prop="name">
                    <Input type="text" v-model="form.name" placeholder="请输入用户名">
                        <!--<Icon type="ios-person-outline" slot="prepend"></Icon>-->
                    </Input>
                </Form-item>
                <Form-item prop="phone">
                    <Input type="text" v-model="form.phone" placeholder="请输入手机号">
                    </Input>
                </Form-item>
                <Form-item prop="password">
                    <Input type="password" v-model="form.password" placeholder="请输入密码"></Input>
                </Form-item>
                <Form-item prop="passwdCheck">
                    <Input type="password" v-model="form.passwdCheck" placeholder="请确认密码"></Input>
                </Form-item>
               <Form-item prop="code">
                    <Row :gutter="20">
                        <Col span="16">
                            <Input type="text" v-model="form.code" placeholder="验证码"></Input>
                        </Col>
                        <Col span="8">
                            <Button :disabled="disabled" @click="codeBtn">{{ codeText}}</Button>
                        </Col>
                    </Row>
                </Form-item>
                <Form-item>
                    <Button type="success"  long @click.stop="registerBtn"> 注 册 </Button>
                    <Button long @click="toLogin" style="margin-top:20px">已有账号!马上登录</Button>
                </Form-item>
            </Form>
            </div>
        </div>

    </div>
</template>
<script>
import { setToken } from '../../utils/auth.js';
    export default {
        data () {
          const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.form.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {

				usernamer:'',
				password:'',
				code:'',
				testCode:'',
				disabled:false,
				codeText:'获取验证码',
                form: {
                  name: '',
                  phone:'',
                  password: '',
                  code:'',
                },
                rules: {
                  phone: [
                    { required: true, pattern: /^((0\d{2,3}\d{7,8})|(1[35874]\d{9}))$/, message: '请输入正确的账号', trigger: 'blur,change' }
                  ],
                  password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { type:'string',min:6,max:20,message:'密码长度在6~16位之间',trigger:'blur'},
                  ],
                  passwdCheck: [
                        { validator: validatePassCheck, trigger: 'blur' }
                  ],
                }
               }
        },
        methods:{

            registerBtn() {

                this.$refs['login-form'].validate((valid) => {

                  if (valid) {
                    this.$http.post('member/add', {
                      name:this.form.name,
                      password:this.form.password,
                      phone:this.form.phone,
                      code:this.form.code,
                      fe:1
                    }).then(response => {

                      this.$Notice.success({
                          title: '注册成功！',
                      });
                      this.$http.get('member/oauth', {
                            params: {
                              phone:this.form.phone,
                              password: this.form.password,
                              status: 'SHIP'
                            }
                        }).then(response => {
                            this.$store.dispatch('setToken',response.data.token)
                            .then(_=>{
                                setToken(response.data.token);
                            })
                            // 跳转
                            this.$router.go(0);
                        }).catch(error => {
                            this.$Notice.error({
                                title: '账号或密码错误，或者管理员未审核该账号！',
                            });
                        })

                    }).catch(error => {
                      let err = JSON.stringify(error);
                      err = JSON.parse(err);
                      let e = '';
                      let errors = err.response.data.errors;
                      for(let value in errors){
                          e += errors[value][0]+ '<br/>';
                      }
                      this.$Notice.error({
                          title:'注册失败',
                          desc:e
                      });
                    })
                  }
                });
              },
            codeBtn (){
              if(!(/^((0\d{2,3}\d{7,8})|(1[35874]\d{9}))$/.test(this.form.phone))){
                  this.$Notice.warning({title: '请输入正确的手机号'});
                  return;
              }
     				let sec =60;
				    for(let  i=0; i<=60; i++){
				       var that = this;
				       window.setTimeout(function(){
				        if (sec != 0) {
				             that.codeText =  sec + "秒后重发验证" ;
				             that.disabled = true;
				             sec--;
				         } else {
				             sec = 60; //如果倒计时结束就让获取验证码显示出来
				             that.disabled = false;
				             that.codeText =  "获取验证码" ;
				        }

				       }, i * 1000)
	     			}
     				this.$http.post('http://www.gjypzc.cn/sendMsg',{phone:this.form.phone}).then(ret => {

			            this.testCode = ret.data.code;

			            this.$Notice.success({title: '获取验证码成功'});

			        }).catch(err => {

			            this.$Notice.error({title: '获取验证码失败..'});

			        })

            },
            toLogin(){
              this.$store.dispatch('login',true);
              this.closeReg();
            },
            closeReg(){
              this.$store.dispatch('changeRegState',false);
            }

        }
    }
</script>

<style scoped>

body {
    background-color: #eff2f7;
  }

  .login {
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        /*background: url(../../assets/images/banner3.jpg)no-repeat 0 0 ;*/
        background-size: 100%;
        z-index: 999;
        left:0;
        top:0;
    }

  .login-box {
    background-color: #fff;
    padding: 20px 30px;
    max-width:400px;
    margin:0 auto;
    width:90%;
    position: relative;
    top: 120px;
    border-radius: 0;

  }

  h1 {
    text-align: center;
  }
  .close-window{
        padding:10px;
        position:absolute;
        right: 20px;
        top:10px;
        cursor: pointer;
    }
    .close-window:hover{
        color: #15ccac;
    }

    .title{ margin-top: 30px; margin-bottom:30px;}
    .title h2{ text-align:center;}
    .title h2 span{ font-size:26px; float: left;}
    .title p{ float: right; font-size:16px; color:#999; position: relative; top:10px;}
    .title p a{ color:#15ccac;}
    @media (max-width:992px){
        .login{
            display: flex;
            align-items: center;
        }
        .login-box{
            top:0;
        }
    }
</style>
